<template>
	<view class="wrap">
		<view class="wrap__line"></view>
		<view class="wrap__main">
			<view class="main__option">
				<view class="option__title">
					{{ $t('acccount.type') }} <text class="title__tips">{{ $t('account.nozc') }}</text>
				</view>
				<view class="option__item">
					<text class="item__title item__first">{{ $t('acccount.type') }}</text>
					<view class="item__value">
						<input type="text" v-model="formData.cardType" :placeholder="$t('acccount.type')" class="value__input" maxlength="20"/>
					</view>
				</view>
			</view>
			<view class="main__option">
				<view class="option__title">
					{{ $t('account.message') }} <text class="title__tips">{{ $t('account.nozc') }}</text>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('account.name') }}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_name" :placeholder="$t('acccount.name')" class="value__input" maxlength="30"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('account.blackname') }}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.shiming_name" :placeholder="$t('acccount.blackname')" class="value__input" maxlength="30"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('account.num') }}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_card" :placeholder="$t('acccount.num')" class="value__input" maxlength="30"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('account.country') }}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_nation" :placeholder="$t('acccount.country')" class="value__input" maxlength="20"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('accoun.address') }}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_address" :placeholder="$t('acccount.address')" class="value__input" maxlength="20"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{ $t('accoun.zhaddress') }}</text>
					<view class="item__value">
						<input type="text" v-model.trim="account_address" :placeholder="$t('acccount.zhaddress')" class="value__input" maxlength="20"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">SWIFT CODE</text>
					<view class="item__value">
						<input type="text" v-model.trim="bank_code" placeholder="SWIFT CODE" class="value__input" maxlength="20"/>
					</view>
				</view>
				<view class="option__btn">
					<text class="btn__text" @click="addClick">添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerCash from '@/components/trade/pickerCashTips.vue'
	export default{
		components:{
			pickerCash
		},
		data(){
			return {
				cardType:"", //账户类型
				bank_code: "", // code
				account_address: "", //账户地址
				formData:{
					bank_name: "", // 银行卡名称
					bank_card: "", //银行卡号码
					shiming_name:"", //账户名称
					bank_nation: "", //银行卡国家
					bank_address: "", //银行卡地址
				}
			}
		},
		methods:{
			// 添加点击
			async addClick(){
				let {bank_code, account_address,cardType, formData} = this

				let hasEmpty = false
				for(let key in formData){
					if(formData[key] === ""){
						hasEmpty = true
						break
					}
				}
				if(hasEmpty){
					uni.showToast({
						title:this.$t('fish.message'),
						icon:"none"
					})
					return
				}
				
				
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let params = {
					cardType,
					bank_code,
					account_address,
					...formData
				}
				let res = await this.$api.addBankCard(params)
				uni.hideLoading()
				console.log("绑定结果", res)
				if(res.code === 1 && res.data){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 1200)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #0E101F;
		height: 100vh;
		.wrap__line{
			width: 750rpx;
			height: 30rpx;
			background: #0E101F;
		}
		.wrap__main{
			.main__option{
				padding: 0 30rpx;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				background: #161827;
				.option__title{
					@include flexRowAlign();
					padding-top: 40rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					font-weight: 800;
					color: #FFFFFF;
					margin-bottom: 24rpx;
					&:before{
						content: "";
						margin-left: 10rpx;
						width: 6rpx;
						height: 30rpx;
						background: #458EF4;
						margin-right: 12rpx;
					}
					.title__tips{
						font-size: 28rpx;
						color: #999999;
						font-weight: normal
					}
				}
				.option__item{
					@include flexRowAlign();
					height: 98rpx;
					border-top:1rpx solid #0E101F;
					.item__title{
						font-size: 32rpx;
						color: #FFFFFF;
						width: 200rpx;
						text-align: justify;
						text-align-last: justify;
					}
					.item__first{
						// text-align:initial;
						// text-align-last: initial;
					}
					.item__star{
						font-size: 32rpx;
						color: #FF2B2B;
						margin-left: 4rpx;
					}
					.item__value{
						margin-left: 30rpx;
						.value__input{
							color: #fff;
							font-size: 32rpx;
						}
					}
				}
				.option__btn{
					@include flexRowAlign(center);
					margin-top: 60rpx ;
					padding-bottom: 80rpx;
					.btn__text{
						width: 600rpx;
						height: 98rpx;
						background: #458EF4;
						border-radius: 12rpx;
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
						@include flexCenter();
					}
				}
			}
		}
	}
</style>